<template>
    <section class="todoapp">
      <TodoHeader @create='createFn' :arr="list"></TodoHeader>
      <TodoMain :arr="showList" @del='delFn'></TodoMain>
      <TodoFooter :arr="list" @clear='clearFn' @changeType='changeTypeFn'></TodoFooter>
    </section>
</template>

<script>

import "./styles/base.css"
import "./styles/index.css"

import TodoHeader from "./components/TodoHeader";
import TodoMain from "./components/TodoMain";
import TodoFooter from "./components/TodoFooter";
// 样式引入 + 导入组件并注册使用
export default {
    data() {
        return {
          type:'all',
            list: [
                {
                    id: 100,
                    name: '吃饭',
                    isDone: true,
                },
                {
                    id: 201,
                    name: '睡觉',
                    isDone: false,
                },
                {
                    id: 103,
                    name: '打豆豆',
                    isDone: true,
                },
            ],
        }
    },
    methods:{
      createFn(name){
         this.list.unshift({
        id:+new Date(),
        name,
        isDone: false
      })
      },
      delFn(id){
        this.list= this.list.filter(item=>item.id !== id)
      },
      clearFn(){
        console.log(11);
         this.list= this.list.filter(item=>item.isDone===false)
      },
       changeTypeFn(type){
        this.type=type
      }
    },
    computed:{
      showList(){
            //中间main组件传过去的数据
            if (this.type==='active') {
              return this.list.filter(item=>item.isDone===false)
            }else if(this.type==='complete'){
              return this.list.filter(item=>item.isDone===true)
            }else{
              return this.list
            }
           }
    },

    components:{
      TodoHeader,
      TodoMain,
      TodoFooter
    }
}
</script>
